<template>
	<view class="pay_d">
		<u-form label-width="180" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
			<u-form-item v-if="info.mai" :label="$t('otc.name42')">
				<u-input border="none" style="background:#FFFFFF" v-model="info.mai.name" disabled />
			</u-form-item>
			<u-form-item v-if="info.mai" :label="$t('otc.name43')">
				<u-input border="none" style="background:#FFFFFF" v-model="info.mai.mobile" disabled />
			</u-form-item>
			<u-form-item v-if="info.me" :label="$t('otc.name57')">
				<u-input border="none" style="background:#FFFFFF" v-model="info.me.truename" disabled />
			</u-form-item>
			<u-form-item v-if="info.me" :label="$t('otc.name58')">
				<u-input border="none" style="background:#FFFFFF" v-model="info.me.mobile" disabled />
			</u-form-item>
			<u-form-item v-if="info.num" :label="$t('otc.name45')">
				<u-input border="none" style="background:#FFFFFF" v-model="info.num" disabled />
			</u-form-item>
			<u-form-item v-if="info.money" :label="$t('otc.name46')">
				<u-input border="none" style="background:#FFFFFF" v-model="info.money" disabled />
			</u-form-item>
			<u-form-item v-if="info.price" :label="$t('otc.name47')">
				<u-input border="none" style="background:#FFFFFF" v-model="info.price" disabled />
			</u-form-item>
		</u-form>
		<u-form label-width="180" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
			<u-form-item v-if="info.mai" :label="$t('otc.name48')">
				<u-input border="none" disabled style="background:#FFFFFF" v-model="info.mai.bank_addr" />
			</u-form-item>
			<u-form-item v-if="info.mai" :label="$t('otc.name49')">
				<u-input border="none" disabled style="background:#FFFFFF" v-model="info.mai.bank_code" />
			</u-form-item>
		</u-form>
		<u-form label-width="180" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
			<u-form-item>
				<div class="wrweima">
					<div class="erweima" v-if="info.mai.wx_image" @click="Preview_img(info.mai.wx_image)">
						<image :src="$fun.imgUrl(info.mai.wx_image)" alt="" srcset="">
							<p style="background-color:#22ac38">{{$t('otc.name50')}}</p>
					</div>
					<div class="erweima erweimas" v-if="info.mai.ali_image" @click="Preview_img(info.mai.ali_image)">
						<image :src="info.mai.ali_name" alt="" srcset="">
							<p>{{$t('otc.name51')}}</p>
					</div>
				</div>
			</u-form-item>
			<u-form-item>
				<div class="wrweima">
					<div class="erweima1" v-if="info.image" @click="Preview_img(info.me.wx_image)">
						<image :src="$fun.imgUrl(info.me.wx_image)" alt="" srcset="">
							<p style="background-color:#22ac38">{{$t('otc.name52')}}</p>
					</div>
				</div>
			</u-form-item>
		</u-form>
		<u-popup :show="showImg" mode="center" @close="closeModel()">
			<view class="tab_box" :style="{ width: '300px',padding:'5px 20px' }">
				<image style="width: 250px;margin: 0 5px;" :src="$fun.imgUrl(imgSrc)" mode=""></image>
			</view>
		</u-popup>
		<u-popup :show="payImg" mode="center" @close="closeModel()">
			<view class="tab_box" :style="{ width: '300px',padding:'5rpx 10rpx' }">
				<u-form label-width="120" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
					<u-form-item :label="$t('otc.name42')">
						<u-input border="none" style="background:#FFFFFF" v-if="info.mai" v-model="info.mai.name"
							disabled />
					</u-form-item>
					<u-form-item :label="$t('otc.name53')">
						<u-input border="none" style="background:#FFFFFF" v-if="info" v-model="'￥'+info.price"
							disabled />
					</u-form-item>
					<u-form-item :label="$t('otc.name52')">
						<image style="background: #F5F5F5;width: 200rpx;height: 200rpx;" v-if="fileList"
							@click="choose_img_upload" :src="$fun.imgUrl(fileList)" alt="">
							<image @click="choose_img_upload" v-else
								style="background: #F5F5F5; width: 150rpx;height: 150rpx;" src="/static/ico-101.png"
								mode=""></image>
					</u-form-item>
					<u-button @click="confirm" style="width: 95%;margin-left: 2.5%;" type="primary">
						{{$t('otc.name56')}}</u-button>
				</u-form>
			</view>
		</u-popup>
		<u-button v-if="info.pay" @click="payImg = true;fileList=''" style="width: 95%;margin-left: 2.5%;"
			type="primary">
			{{$t('otc.name54')}}</u-button>
		<view style="height: 30rpx;">

		</view>
	</view>
</template>

<script>
	// import config from "@/config.js"
	export default {
		data() {
			return {
				info: {
					mai: {
						image: ''
					}
				},
				id: null,
				// 图片查看
				imgSrc: '',
				// 图片弹窗
				showImg: false,
				// 打款弹窗
				payImg: false,
				fileList: ""
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initDate()
		},
		methods: {
			initDate() {
				this.$fun.ajax.post('/otc/dakuan', {
					id: this.id
				}).then(res => {
					this.info = res.data
				})
			},
			closeModel() {
				this.payImg = false
				this.showImg = false
			},
			// 查看图片
			Preview_img(url) {
				this.showImg = true
				this.imgSrc = url
			},
			async choose_img_upload() {
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.handleUploadFile(res.tempFilePaths);
					}
				});
			},
			// 上传头像
			handleUploadFile(data, str1, str2) {
				const _this = this;
				const filePath = data.path || data[0];
				_this.$fun.uploadPic(filePath, 'file')
					.then(r => {
						_this.fileList = r.data.url;
					});
			},
			confirm() {
				if (!this.fileList) {
					this.$util.msg(this.$t('otc.name55'))
					return false
				}
				this.$fun.ajax.post('/otc/pay', {
					id: this.id,
					image: this.fileList
				}).then(res => {
					this.$fun.msg(res.msg)
					if (res.code == 1) {
						this.payImg = false
						this.$fun.jump('', 4, 1200)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.pay_d {
		.wrweima {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.erweima1 {
				width: 100%;
				text-align: center;

				image {
					height: 300rpx;
					margin: 5rpx auto;
				}
			}

			image {
				width: 300rpx;
				height: 300rpx;
			}

			p {
				margin: 0 auto;
				text-align: center;
				width: 150px;
				height: 30px;
				background-color: #03a0e9;
				font-family: AdobeHeitiStd-Regular;
				font-size: 13px;
				font-weight: bold;
				font-stretch: normal;
				line-height: 30px;
				letter-spacing: 0px;
				color: #ffffff;
			}
		}

		.u-btn--primary {
			color: #fff;
			border-color: #2979ff;
			background-color: #2979ff !important;

		}
	}
</style>